<template>
    <view class="">
        <view class="heard">
            <view class="item ls-f-ajsb"
                  @click="showSchool=true">
                <view class="f-32">学校</view>
                <view class="ls-f-ac">
                    <text class="f-32">{{arr.schoolName}}</text>
                </view>
            </view>
            <view class="hr"></view>
            <view class="item ls-f-ajsb"
                  @click="showCourse=true">
                <view class="f-32">学科</view>
                <view class="ls-f-ac">
                    <text class="f-32">{{arr.productName}}</text>

                </view>
            </view>
        </view>
        <view class="tab">
            <u-tabs :list="tabs"
                    name="name"
                    item-width="350"
                    paddingRight="50rpx"
                    :current="currentIndex"
                    @change="sel"
                    height="80"
                    font-size="32"
                    bar-width="64"
                    gutter="44"
                    bg-color=" #f3f3f3"
                    inactive-color="#666666"
                    active-color="#63B9F2"></u-tabs>
        </view>
        <view class="info">
            {{currentIndex==0?'工作照片/视频':'反馈信息'}}
        </view>
        <view class="card"
              v-if="currentIndex==0">

            <view class="">
                <view class="titl">课前教室检查</view>
                <view class="ls-f-ac u-flex-wrap">
                    <image v-for="item in arr.beforeClassPicArr"
                           :src="item"
                           mode="aspectFill"
                           class="img"></image>
                </view>

            </view>
            <view class="">
                <view class="titl">课后教室还原</view>
                <view class="ls-f-ac u-flex-wrap">
                    <image v-for="item in arr.afterClassPicArr"
                           :src="item"
                           mode="aspectFill"
                           class="img"></image>
                </view>

            </view>
            <view class="">
                <view class="titl">学生考勤照</view>
                <view class="ls-f-ac u-flex-wrap">
                    <image v-for="item in arr.checkWorkArr"
                           :src="item"
                           mode="aspectFill"
                           class="img"></image>
                </view>

            </view>
			<view class="" v-if="!arr.allWork&&qname.length>0">
			    <view class="titl">缺勤学生</view>
			    
			    <view class="xList mt-30" >
			    	
			    	<view  v-for="(ite,ind) in qname" :key="ind" class="xbox xchecked">
			    		<view class="xbox-name">
			    			{{ite}}
			    		</view>
			    		<view class="xbox-tel">
			    			{{qtel[ind]}}
			    		</view>
			    	</view>
			    </view>
			
			</view>
        </view>
        <view class=""
              v-if="currentIndex==1">

            <view class="itt">
                <view class="titl">课后反馈</view>
                <view class="f-28 text">{{arr.afterWorkRemake}}</view>
                <view class="ls-f-ac u-flex-wrap">
                    <image v-for="item in arr.afterWorkPicArr"
                           :src="item"
                           mode="aspectFill"
                           class="img"></image>
                </view>

            </view>
            <view class="itt">
                <view class="titl">作业布置</view>
                <view class="f-28 text">{{arr.taskComment}}</view>
                <view class="ls-f-ac u-flex-wrap">
                    <image v-for="item in arr.taskPicArr"
                           :src="item"
                           mode="aspectFill"
                           class="img"></image>
                </view>

            </view>
        </view>
        <view class=""
              style="height: 100rpx;"></view>
    </view>
</template>

<script>
export default {
    data() {
        return {
			qname:[],
			qtel:[],
            arr: [],
            course: {
                label: '请选择',
                value: "-1"
            },
            school: {
                label: '请选择',
                value: "-1"
            },
            tabs: [{
                name: '校内工作记录'
            },
            {
                name: '课后反馈'
            },
            ],
            currentIndex: 0,
        }
    },
    methods: {
        sel(e) {
            // this.currentIndex=e

        },
        getDetail() {
            this.$api.getAfterWorkList(data, res => {
                this.list = []
                this.list = res.data.list
                console.log("res.data.list", res.data.list)
                for (var i = 0; i < res.data.list.length; i++) {
                    let da = res.data.list[i].afterWorkPic.split(",")
                    this.list[i].afterWorkPicAr = da

                }


            })
        }
    },
    onLoad(option) {
        this.arr = JSON.parse(option.item);
        this.currentIndex = option.type
        console.log("aaaaaaaaa", this.arr)
		if(!this.arr.allWork&&this.arr.unWorkName){
			this.qname=this.arr.unWorkName.split(',')
			this.qtel=this.arr.unWorkTelno.split(',')
		}
    }
}
</script>

<style scoped lang="scss">
.itt {
    border-radius: 15rpx;
    margin-bottom: 32rpx;
    background-color: #fff;
    border-radius: 15rpx;
    padding: 0rpx 0rpx 10rpx 32rpx;
    padding-top: 1rpx !important;
    margin-left: 32rpx;
    width: 686rpx;
    margin-top: 32rpx;
    .text {
        margin-top: 32rpx;
        color: #999999;
        font-size: 28rpx;
    }
}
.u-flex-wrap {
    margin-top: 25rpx;
}
.img {
    width: 192rpx;
    height: 196rpx;
    border-radius: 12rpx;
    margin-right: 20rpx;
    margin-bottom: 20rpx;
}
.card {
    background-color: #fff;
    border-radius: 15rpx;
    padding: 0rpx 0rpx 34rpx 32rpx;
    padding-top: 1rpx !important;
    margin-left: 32rpx;
    width: 686rpx;
    margin-top: 32rpx;
    .hr {
        margin-top: 32rpx;
        width: 630rpx;
        background-color: #eee;
        height: 1rpx;
    }
}
.titl {
    margin-top: 32rpx;
    color: #333;
    font-size: 32rpx;
}
.info2 {
    color: #cccccc;
    font-size: 28rpx;
}
.info {
    color: #999999;
    font-size: 24rpx;
    margin-left: 32rpx;
}
.tab {
    margin: 20rpx 0;
}
.hr {
    width: 680rpx;
    height: 2rpx;
    background-color: #f5f5f5;
}
.heard {
    width: 750rpx;
    height: 224rpx;
    background: #ffffff;
    padding: 0 32rpx;
    border-radius: 0px 0px 32rpx 32rpx;
    .item {
        height: 112rpx;
    }
}
.xList{
	display: flex;
	flex-wrap: wrap;
	.xbox{
		padding:10rpx 15rpx;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin: 10rpx;
		.xbox-name{
			font-size: 28rpx;
		}
		.xbox-tel{
			font-size: 24rpx;
		}
	}
	.xchecked{
		background-color: #63b9f2;
		color: #ffffff;
	}
	.xno{
		background-color: #f5f5f5;
		color: #333333;
		
	}
}
</style>
